import React, { Component } from 'react';
import { 
  StyleSheet,  
  Text,
  Image, 
  TouchableOpacity,
  View
} from 'react-native';

import CommonCSS from './commonCSS';
import ScreenInfo from './util/screenInfo';
import ActivityInfo from './pages/ActivityInfo';


export default class Card extends Component {
	constructor(props) {
		super(props);   
	}
	static  propTypes = { 
    rowData: React.PropTypes.object,  
  };
	render() { 
		const {height, width} = ScreenInfo;   
		//图片尺寸为1024*768，宽高比为4：3
		const {imgH, imgW} =  {imgH: (width-12)*0.75, imgW: width-12}; 

		//card布局方案： card 0.7  cardImg：0.4   
		return(
				<View style={[styles.card, CommonCSS.testRed]}>
					<TouchableOpacity onPress={this._onPressButton.bind(this)}>
						<Image source={{uri: this.props.rowData.imgPath}} style={{width: imgW, height: imgH}} />
						<Text style={[styles.subTitle, CommonCSS.testYellow]}>{this.props.rowData.subTitle}</Text>
						<Text style={[styles.title, CommonCSS.testGreen]}>{this.props.rowData.title}</Text>
						<View style={[styles.tagsRow, CommonCSS.testYellow]}>
						{
							this.props.rowData.tags.map((tag, index) => {
								let bgColor = "#fff";
								switch(tag.key){
									case 1: 
										bgColor = "#808285";
										break;
									case 2: 
										bgColor = "#F09625";
										break;
									case 3: 
										bgColor = "#44A8E1";
										break;
								}
								return (
									<Text key={index} style={[styles.tag, {color: '#ffffff', backgroundColor: bgColor}]}>{tag.text}</Text>
									)
							})
						}
						</View>
						<Text style={[styles.explain, CommonCSS.testYellow]}
							  numberOfLines={3}>
							  {this.props.rowData.explain}
					    </Text>
				    </TouchableOpacity>
					<View style={[styles.btnRow, ]}>
						<TouchableOpacity style={[styles.btn, CommonCSS.testPink]} onPress={this._onPressButton.bind(this)}> 
								<Image style={styles.icon} source={require('./images/share.png')} />
								<Text style={styles.btnText}>分享</Text> 
						</TouchableOpacity>
						<TouchableOpacity style={[styles.btn, styles.partition, CommonCSS.testPink]} onPress={this._onPressButton.bind(this)}>  
								<Image style={styles.icon} source={require('./images/like.png')} />
								<Text style={styles.btnText}>赞</Text> 
						</TouchableOpacity>
						<TouchableOpacity style={[styles.btn, CommonCSS.testPink]} onPress={this._onPressButton.bind(this)}> 
								<Image style={styles.icon} source={require('./images/join.png')} />
								<Text style={styles.btnText}>参与</Text> 
						</TouchableOpacity> 
					</View>
				</View>
			);



	} 

	_onPressButton(){
		this.props.navi.naviPush(ActivityInfo, "ActivityInfo");
		// console.log("pressimg");
		// const navigator = this.props.navigator;
		// console.log("navigator", this.props.navigator);
		// // //const { navigator } = this.props;
		// navigator.push({
	 //        component: ActivityInfo,
	 //        name: 'ActivityInfo' 
	 //    });

		 
	}

}

const styles = StyleSheet.create({   
	icon: {
		width: 25, 
		height: 25,
	},
	subTitle: {
		backgroundColor: '#fff',  
		fontSize: 12,
	},
	title: {
		backgroundColor: '#fff',
		fontSize: 20,
		fontWeight: '900',
	},
	tagsRow: {
		flexDirection: "row",
		marginTop: 6,
		marginBottom: 6, 
	},
	tag: {
		backgroundColor: '#fff',
		marginRight: 5, 
		paddingLeft: 10,
		paddingRight: 10,
		fontSize: 12,
	},
	explain: {
		backgroundColor: '#fff', 
		fontSize: 12,
		paddingBottom: 6, 
		borderBottomWidth: 1, 
	    borderBottomColor: '#B0B1B4',
	},
	btnRow: {
		flexDirection: "row", 
		flex: 1,  
		marginTop: 10,
		marginBottom: 10, 
	},
	partition: {
		borderLeftWidth: 1, 
	    borderLeftColor: '#B0B1B4',
	    borderRightWidth: 1, 
	    borderRightColor: '#B0B1B4',

	},
	btn: {
		flexDirection: "row", 
		flex: 1,   
		alignItems: "center",
		justifyContent: "center",
	},
	btnText: {  
		textAlign: "center",
		lineHeight: 20
	},
	card: {
	    borderWidth: 1,
	    backgroundColor: '#fff',
	    borderColor: 'rgba(0,0,0,0.1)',
	    margin: 0, 
	    padding: 5,
	    shadowColor: '#ccc',
	    shadowOffset: { width: 2, height: 2, },
	    shadowOpacity: 0.5,
	    shadowRadius: 3,
	  },
});